<template>
	<view class="">
		<NavBar title="营销管理" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="header_box">
			<view class="header_row1 flex_both">
				<view class="flex">
					<view class="">
						<text class="f_24_f">
							我的佣金：
						</text>
					</view>
					<view class="">
						<text class="f_36_f_b">
							{{userInfo.yong_money}}元
						</text>
					</view>
				</view>
				<view class="">
					<text class="f_24_f">
						营销成功充值数：{{userInfo.yongNum}}次
					</text>
				</view>
			</view>
			<view class="header_row2 flex" style="justify-content: center;">
				<view class="header_row2_btn" @click="toJs">
					<text class="f_24_f">
						结算记录 >
					</text>
				</view>
				<view class="m_l_100 m_r_100" style="width: 2rpx;height: 77rpx;background: #F7997E;">

				</view>
				<view class="header_row2_btn" @click="toYxm">
					<text class="f_24_f">
						我的营销码 >
					</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="search_box m_b_40" style="padding-top: 32rpx;">
				<view class="search_input"
					:style="form.searchVal?{width:'710rpx'}:{paddingLeft:'46rpx',width:'666rpx'}">
					<view class="">
						<view class="search_icon" v-if="!form.searchVal">
							<up-icon name="search" color="#7E7D7D" size="18"></up-icon>
						</view>
						<view class="" style="">
							<up-input placeholder="请输入关键字" border="none" v-model="form.searchVal" inputAlign="center"
								fontSize="24rpx" @change="onSearchChange"></up-input>
						</view>
					</view>
				</view>
			</view>
			<view class="condition_box flex_both " style="padding-bottom: 28rpx;">
				<view class="condition_calendar flex_both" @click="showCalendar('begin')">
					<text class="f_24_0">
						{{form.begin_date}}
					</text>
					<view class="m_b_14">
						<up-image :show-loading="true" src="/static/images/my/calendar_icon.png" width="28rpx"
							height="28rpx"></up-image>
					</view>
				</view>
				<view class="condition_hr">

				</view>
				<view class="condition_calendar flex_both" @click="showCalendar('end')">
					<text class="f_24_0">
						{{form.end_date}}
					</text>
					<view class="m_b_14">
						<up-image :show-loading="true" src="/static/images/my/calendar_icon.png" width="28rpx"
							height="28rpx"></up-image>
					</view>
				</view>
				<view class="condition_btn" @click="onSearch">
					<text class="f_26_f">
						搜索
					</text>
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height: viewHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="main_item flex m_b_28" v-for="(item,index) in logList" :key="index">
						<view class="main_item_img m_r_28">
							<up-image :show-loading="true" :src="item.carTypeInfo.type_image" width="152rpx"
								height="152rpx" radius="8" mode="widthFix"></up-image>
						</view>
						<view class="">
							<view class="m_b_16">
								<text class="f_30_0_b">
									{{item.shop_name}}
								</text>
							</view>
							<view class="">
								<view class="flex_both" style="width: 460rpx;">
									<view class="" style="width: 230rpx;">
										<text class="f_24_0 u-line-1" style="color: #7E7D7D;">
											名称：{{item.userInfo.nickname}}
										</text>
									</view>
									<view class="" style="width: 230rpx;">
										<text class="f_24_0  u-line-1" style="color: #7E7D7D;">
											客户类型：{{item.userInfo.groupName}}
										</text>
									</view>
								</view>
								<view class="flex_both" style="width: 460rpx;">
									<view class="" style="width: 230rpx;">
										<text class="f_24_0  u-line-1" style="color: #7E7D7D;">
											车型：{{item.carTypeInfo.type_name}}
										</text>
									</view>
									<view class="" style="width: 230rpx;">
										<text class="f_24_0 u-line-1" style="color: #7E7D7D;">
											充值金额：{{parseInt(item.money)}}元
										</text>
									</view>
								</view>
								<view class="" style="width: 460rpx;">
									<text class="f_24_0 u-line-1" style="color: #7E7D7D;">
										时间：{{item.create_time}}
									</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&logList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false" :monthShowCurrentMonth="true"
			color="#FE5E10" operationPosition="bottom"></wu-calendar>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const viewHeight = ref()
	const goto = (url) => {
		proxy.$gloab.gotoPage(url)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 42}rpx)`
				viewHeight.value = `calc(100vh - 650rpx)`
			}
		});
		//
		initTime()
		getUserInfo()
		getMarketLogList()

	})
	// 个人信息
	const userInfo = ref({
		yong_money: '',
		yong_num: ''
	})
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		userInfo.value = data
	}

	// 营销记录
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		// if (loadShow.value) return
		// page.value = ++page.value;
		// loadShow.value = true;
		// setTimeout(() => {
		// 	getMarketLogList()
		// }, 1000)
	}
	const logList = ref([])
	const getMarketLogList = async () => {
		// if (loadMessage.value == '没有更多了') {
		// 	loadShow.value = true;
		// 	setTimeout(() => {
		// 		loadShow.value = false;
		// 	}, 200)
		// 	return
		// }
		let res = await proxy.$http('my.getMarketLogList', { begin_date: form.value.begin_date, end_date: form.value.end_date, search: form.value.searchVal })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				logList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	// 检索条件
	const form = ref({
		searchVal: '',
		begin_date: '',
		end_date: ''

	})
	const isSel = ref(false)
	const timer = ref(null)
	const onSearchChange = (e) => {
		form.value.searchVal = e
		loadMessage.value = "加载中"
		page.value = 1
		logList.value = []
		if (timer.value) {
			clearTimeout(timer.value)
		}
		timer.value = setTimeout(() => {
			getMarketLogList()
		}, 200)

	}
	const onSearch = () => {
		loadMessage.value = "加载中"
		page.value = 1
		logList.value = []
		setTimeout(() => {
			getMarketLogList()
		}, 200)
	}
	// 开始和结束时间
	const initTime = () => {
		let time = proxy.$gloab.formatDateY_M_D(new Date(), '-')
		console.log(time);
		form.value.begin_date = time
		form.value.end_date = time
	}
	const calendar = ref(null)
	const timeActive = ref('')
	const showCalendar = (e) => {
		timeActive.value = e
		calendar.value.open()
	}
	const calendarConfirm = (e) => {
		if (timeActive.value == 'begin') {
			form.value.begin_date = e.fulldate
		} else if (timeActive.value == 'end') {
			form.value.end_date = e.fulldate
		}
	}

	const toJs = () => {
		goto('/pages/my/marketingSettlementLog')
	}
	const toYxm = () => {
		goto('/pages/my/marketingCode')
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx 0;

		.header_box {
			.header_row1 {
				padding: 0 24rpx;
				height: 68rpx;
				background: #ED300A;
			}

			.header_row2 {
				height: 128rpx;
				background: #F84C1A;

				.header_row2_btn {
					width: 186rpx;
					height: 49rpx;
					border-radius: 24rpx;
					border: 2rpx solid #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.main {
			padding: 0 20rpx;

			.search_box {
				width: 750rpx;
				height: 66rpx;
				background: #F7F8FC;

				.search_input {
					padding: 11rpx 0;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 34rpx;
					position: relative;


					.search_icon {
						position: absolute;
						left: 260rpx;
						top: 16rpx;
					}
				}
			}

			.condition_box {
				.condition_calendar {
					width: 210rpx;
					padding: 0 22rpx;
					height: 63rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;
				}

				.condition_hr {
					width: 26rpx;
					height: 2rpx;
					background: #000000;
				}

				.condition_btn {
					width: 119rpx;
					height: 63rpx;
					background: linear-gradient(90deg, #F93E19, #F75C1B);
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.main_list {
				padding: 24rpx 0;
				height: calc(100vh - 700rpx);
				overflow: auto;

				.main_item {
					padding: 22rpx 24rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 5rpx;
				}
			}
		}


	}

	::v-deep.u-image {
		display: flex;
		align-items: center;
	}
</style>